<template>
  <div class="category">
    <div class="left">
      <mt-navbar v-model="selected">
        <mt-tab-item :id="item1.id" v-for="(item1,index) in firstList" :key='index'>{{item1.categoryName}}</mt-tab-item>
      </mt-navbar>
    </div>
    <div class="right">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item :id="item2.id" v-for="(item2,index) in firstList" :key='index'>
            <ul class="cateBind clearfix">
                <li v-for="(item3,index) in secondList" :key="index">
                    <router-link to=''>
                        <!-- 拼接图片路径实现图片在页面中显示 -->
                        <img :src="'http://127.0.0.1:3000/'+item3.brandLogo" alt="">
                        <span>{{item3.brandName}}</span>
                    </router-link>
                </li>
            </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import { firstCateList, secondCateList } from '@/api/index.js'
export default {
  data () {
    return {
      selected: '',
      firstList: [],
      secondList: []
    }
  },
  created () {
    this.getFirstCateList()
    // this.getSecondCateList()
  },
  methods: {
    // 左侧列表显示
    getFirstCateList () {
      firstCateList()
        .then(res => {
        //   console.log(res.status)
          if (res.status === 200) {
            this.firstList = res.data.rows
            // 实现默认页的显示
            this.selected = this.firstList[0].id
          }
        })
    }
  },
  watch: {
    //   右侧数据根据监听到的id发送请求获取到数据后再页面中渲染显示
    selected (val) {
      secondCateList(val)
        .then(res => {
          this.secondList = res.data.rows
          console.log(this.secondList)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.category {

  height: 100%;
  display: flex;
  background-color: pink;
  .left {
    width: 100px;
    //  height: 100%;
    background-color: yellow;
    .mint-navbar {
      flex-direction: column;
    }
  }
  .right {
    flex: 1;
    // background-color: pink;
    .cateBind {
        width: 100%;
        li {
            float: left;
            width: 33.33%;
            text-align: center;
            padding: 5px;
            a {
                text-decoration: none;
                color: #000;
                img {
                display: block;
                width: 100%;
            }
            }
        }
    }
  }
}
</style>
